<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '50px'
            },
            value: {
                type: Number,
                default: 0
            },
            color: {
                type: String,
                default: '#2f889a'
            }
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                // 最大值
                let max = 100;
                // 计算
                let rate = Math.round((this.value * 100) / max);
                this.chart.setOption({
                    //你的代码
                    title: {
                        text: rate, // 显示标题
                        show: true, // 是否显示
                        x: 'center', // x轴位置
                        y: '27%', // y轴位置
                        textStyle: { // 样式配置
                            fontsize: 16,
                            color: '#000'
                        },
                    },
                    // 提示框组件
                    // tooltip: {
                    //     formatter: function (params) {
                    //         return (
                    //             '<span style="color: #000;">占比：' + rate + '%</span>' // 提示框浮层内容格式器
                    //         );
                    //     }
                    // },
                    angleAxis: {
                        max: max,
                        clockwise: true, // 逆时针
                        // 隐藏刻度线
                        show: false,
                        // 开始的角度
                        startAngle: 90
                    },
                    radiusAxis: {
                        type: 'category',
                        show: true,
                        axisLabel: {
                            show: false, // 是否显示标签
                        },
                        axisLine: {
                            show: false, // 是否显示轴线
                        },
                        axisTick: {
                            show: false, // 是否显示刻度
                        },
                    },
                    polar: [
                        {
                            center: ['50%', '50%'], //中心点位置
                            radius: '180%' //图形大小
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            z: 10,
                            data: [this.value], // 数据
                            coordinateSystem: 'polar', // 坐标
                            roundCap: false, // 是否在环形柱条两侧使用圆弧效果
                            barWidth: 5, // 大的占比环
                            itemStyle: { // 图形样式
                                normal: {
                                    color: this.color,
                                }
                            }
                        },
                        {
                            type: 'pie',
                            radius: ['85%', '100%'], // 饼图的半径
                            hoverAnimation: false, // 悬浮突出
                            itemStyle: { // 图形样式
                                color: "#DFE0EF", // 颜色
                            },
                            data: [max]
                        }

                    ]
                })
            }
        }
    }
</script>
